<template>
  <div :class="['section', 'activity_rules']">
    <div class="text_content">
      <div class="item" v-for="item in rules">
        <h4>{{item.title}}</h4>
        <p v-html="item.content"></p>
      </div>
    </div>
    <router-link to="/index/activity_rules/create_feast" class="btn">
      <img src="../assets/images/button_bg.png">
      <p>马上办囍宴</p>
    </router-link>
    <home></home>
  </div>
</template>

<script>
  import home from '@/components/home';

  export default {
    name: 'activityRules',
    data: function () {
      return {
        rulesPath: 'static/data/activity_rules.json',
        rules: null
      }
    },
    components: {
      home
    },
    created: function () {
      axios.get(this.rulesPath).then((res) => {
        this.$set(this, 'rules', res.data.activityRules);
      }).catch((error) => {
        console.log(error);
      });
    }
  }
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .activity_rules {

    .text_content {
      top: setRem(50px);
      bottom: setRem(120px);
    }

    .btn {
      bottom: setRem(42px);
    }
  }

</style>
